export const experienceMap = async (echarts, data) => {
  let title = [
    {
      label: 'DNS查询',
      value: 'DNSTime',
    },
    {
      label: 'TCP连接',
      value: 'TCPconnectTime',
    },
    {
      label: '请求响应',
      value: 'TTFBTime',
    },
    {
      label: '响应获取',
      value: 'responseTime',
    },
    {
      label: 'DOM解析',
      value: 'DOMTime',
    },
    {
      label: '首次交互',
      value: 'timeToInteractive',
    },
    {
      label: '完全加载',
      value: 'loadTIme',
    },
  ]
  let option = {
    title: {
      text: '性能指标'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let tar = params[0]
        return tar && tar.name + '<br/>' + '耗时' + ' : ' + tar.value.toFixed(2) + 'ms';
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: title.map(e => e.label)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Placeholder',
        type: 'bar',
        stack: 'Total',
        silent: true,
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        },
        emphasis: {
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
          }
        },
        data: []
      },
    ]
  };
  const getData =  (data) => {
    try {
      let d_ = data
      let temp = []
      title.forEach((e, index) => {
        let arr = Array(7).fill('-');
        let i = d_[e.value]
        let t = i
        if (temp.length > 0) {
          t = i + temp[temp.length - 1]
        }
        temp.push(t)
        option.series.push(
          {
            name: e.label,
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: arr.map((j, index_) => {
              if (index === index_) {
                return i.toFixed(2)
              } else {
                return '-'
              }
            })
          },
        )
      })
      option.series[0].data = temp
      var chartDom = document.getElementById('experienceMap');
      var myChart = echarts.init(chartDom, 'dark');
      option && myChart.setOption(option);
    } catch (error) {
      console.log(error);
    }
  }
  getData(data)
}
